<template>
  <div class="stores-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">门店管理</h2>
        <div class="statistics" v-if="statistics">
          <div class="stat-item">
            <span class="stat-value">{{ statistics.totalCount }}</span>
            <span class="stat-label">总门店</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ statistics.statusStatistics?.active || 0 }}</span>
            <span class="stat-label">营业中</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ statistics.statusStatistics?.paused || 0 }}</span>
            <span class="stat-label">暂停营业</span>
          </div>
        </div>
      </div>
      <button class="add-btn" @click="showCreateModal = true">
        <svg viewBox="0 0 24 24">
          <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
        </svg>
        新增门店
      </button>
    </div>

    <!-- 搜索筛选 -->
    <div class="filters">
      <div class="search-box">
        <svg class="search-icon" viewBox="0 0 24 24">
          <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L20.71,20L19.29,21.41L13.73,15.44C12.59,16.41 11.11,17 9.5,17A6.5,6.5 0 0,1 3,10.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
        </svg>
        <input 
          v-model="searchParams.name" 
          @input="handleSearch"
          placeholder="搜索门店名称..." 
          class="search-input"
        />
      </div>
      <select v-model="searchParams.status" @change="handleSearch" class="status-filter">
        <option value="">全部状态</option>
        <option value="1">营业中</option>
        <option value="2">暂停营业</option>
        <option value="3">已关闭</option>
      </select>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      <div class="loading-spinner"></div>
      <span>加载中...</span>
    </div>

    <!-- 门店列表 -->
    <div v-else-if="storeList.length > 0" class="stores-grid">
      <div class="store-card" v-for="store in storeList" :key="store.id">
        <div class="store-header">
          <h3 class="store-name">{{ store.name }}</h3>
          <div class="store-status">
            <span :class="['status-badge', getStatusClass(store.status)]">
              {{ store.statusText }}
            </span>
          </div>
        </div>
        <div class="store-info">
          <div class="info-item">
            <span class="info-label">编码：</span>
            <span class="info-value">{{ store.code }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">地址：</span>
            <span class="info-value">{{ store.address }}</span>
          </div>
          <div class="info-item" v-if="store.phone">
            <span class="info-label">电话：</span>
            <span class="info-value">{{ store.phone }}</span>
          </div>
          <div class="info-item" v-if="store.businessHours">
            <span class="info-label">营业时间：</span>
            <span class="info-value">{{ store.businessHours }}</span>
          </div>
        </div>
        <div class="store-actions">
          <button class="action-btn edit" @click="editStore(store)">编辑</button>
          <button class="action-btn view" @click="viewStore(store)">查看</button>
          <button 
            :class="['action-btn', 'status', getStatusActionClass(store.status)]"
            @click="toggleStoreStatus(store)"
          >
            {{ getStatusActionText(store.status) }}
          </button>
          <button class="action-btn delete" @click="deleteStoreItem(store)">删除</button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <svg class="empty-icon" viewBox="0 0 24 24">
        <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
      </svg>
      <h3>暂无门店数据</h3>
      <p>点击上方"新增门店"按钮创建第一个门店</p>
    </div>

    <!-- 分页 -->
    <div v-if="pagination.total > 0" class="pagination">
      <button 
        :disabled="pagination.current <= 1" 
        @click="changePage(pagination.current - 1)"
        class="page-btn"
      >
        上一页
      </button>
      <span class="page-info">
        第 {{ pagination.current }} 页，共 {{ pagination.pages }} 页
      </span>
      <button 
        :disabled="pagination.current >= pagination.pages" 
        @click="changePage(pagination.current + 1)"
        class="page-btn"
      >
        下一页
      </button>
    </div>

    <!-- 创建门店模态框 -->
    <div v-if="showCreateModal" class="modal-overlay" @click="showCreateModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>新增门店</h3>
          <button class="close-btn" @click="showCreateModal = false">
            <svg viewBox="0 0 24 24">
              <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
            </svg>
          </button>
        </div>
        <form @submit.prevent="handleCreateStore" class="store-form">
          <div class="form-row">
            <div class="form-group">
              <label>门店名称 *</label>
              <input v-model="createForm.name" type="text" required placeholder="请输入门店名称" />
            </div>
            <div class="form-group">
              <label>门店编码 *</label>
              <input v-model="createForm.code" type="text" required placeholder="如：SH001" />
              <small>3-20位大写字母和数字组合</small>
            </div>
          </div>
          <div class="form-group">
            <label>门店地址 *</label>
            <input v-model="createForm.address" type="text" required placeholder="请输入详细地址" />
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>联系电话</label>
              <input v-model="createForm.phone" type="text" placeholder="请输入11位手机号" />
              <small>请输入11位手机号，格式：13800138000</small>
            </div>
            <div class="form-group">
              <label>营业时间</label>
              <input v-model="createForm.businessHours" type="text" placeholder="如：10:00-22:00" />
            </div>
          </div>
          <div class="form-group">
            <label>门店状态 *</label>
            <select v-model="createForm.status" required>
              <option value="1">营业中</option>
              <option value="2">暂停营业</option>
              <option value="3">已关闭</option>
            </select>
          </div>
          <div class="form-group">
            <label>门店描述</label>
            <textarea v-model="createForm.description" placeholder="请输入门店描述" rows="3"></textarea>
          </div>
          <div class="form-actions">
            <button type="button" @click="showCreateModal = false" class="cancel-btn">取消</button>
            <button type="submit" class="submit-btn" :disabled="createSubmitting">
              {{ createSubmitting ? '创建中...' : '创建门店' }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 编辑门店模态框 -->
    <div v-if="showEditModal" class="modal-overlay" @click="showEditModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>编辑门店</h3>
          <button class="close-btn" @click="showEditModal = false">
            <svg viewBox="0 0 24 24">
              <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
            </svg>
          </button>
        </div>
        <form @submit.prevent="handleEditStore" class="store-form">
          <div class="form-row">
            <div class="form-group">
              <label>门店名称</label>
              <input v-model="editForm.name" type="text" placeholder="请输入门店名称" />
            </div>
            <div class="form-group">
              <label>门店编码</label>
              <input v-model="editForm.code" type="text" disabled />
              <small>门店编码不可修改</small>
            </div>
          </div>
          <div class="form-group">
            <label>门店地址</label>
            <input v-model="editForm.address" type="text" placeholder="请输入详细地址" />
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>联系电话</label>
              <input v-model="editForm.phone" type="text" placeholder="请输入11位手机号" />
              <small>请输入11位手机号，格式：13800138000</small>
            </div>
            <div class="form-group">
              <label>营业时间</label>
              <input v-model="editForm.businessHours" type="text" placeholder="如：10:00-22:00" />
            </div>
          </div>
          <div class="form-group">
            <label>门店状态</label>
            <select v-model="editForm.status">
              <option value="1">营业中</option>
              <option value="2">暂停营业</option>
              <option value="3">已关闭</option>
            </select>
          </div>
          <div class="form-group">
            <label>门店描述</label>
            <textarea v-model="editForm.description" placeholder="请输入门店描述" rows="3"></textarea>
          </div>
          <div class="form-actions">
            <button type="button" @click="showEditModal = false" class="cancel-btn">取消</button>
            <button type="submit" class="submit-btn" :disabled="editSubmitting">
              {{ editSubmitting ? '保存中...' : '保存修改' }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 查看门店模态框 -->
    <div v-if="showViewModal" class="modal-overlay" @click="showViewModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>门店详情</h3>
          <button class="close-btn" @click="showViewModal = false">
            <svg viewBox="0 0 24 24">
              <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
            </svg>
          </button>
        </div>
        <div class="store-details" v-if="currentStore">
          <div class="detail-row">
            <label>门店名称：</label>
            <span>{{ currentStore.name }}</span>
          </div>
          <div class="detail-row">
            <label>门店编码：</label>
            <span>{{ currentStore.code }}</span>
          </div>
          <div class="detail-row">
            <label>门店地址：</label>
            <span>{{ currentStore.address }}</span>
          </div>
          <div class="detail-row" v-if="currentStore.phone">
            <label>联系电话：</label>
            <span>{{ currentStore.phone }}</span>
          </div>
          <div class="detail-row" v-if="currentStore.businessHours">
            <label>营业时间：</label>
            <span>{{ currentStore.businessHours }}</span>
          </div>
          <div class="detail-row">
            <label>门店状态：</label>
            <span :class="['status-badge', getStatusClass(currentStore.status)]">
              {{ currentStore.statusText }}
            </span>
          </div>
          <div class="detail-row" v-if="currentStore.description">
            <label>门店描述：</label>
            <span>{{ currentStore.description }}</span>
          </div>
          <div class="detail-row">
            <label>创建时间：</label>
            <span>{{ formatDate(currentStore.createdAt) }}</span>
          </div>
          <div class="detail-row">
            <label>更新时间：</label>
            <span>{{ formatDate(currentStore.updatedAt) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { 
  getStoreList, 
  getStoreStatistics, 
  deleteStore, 
  updateStoreStatus,
  createStore,
  updateStore,
  checkCodeExists
} from '../../api/store'
import { message } from '../../utils/message'

// 响应式数据
const loading = ref(false)
const storeList = ref([])
const statistics = ref(null)
const showCreateModal = ref(false)
const showEditModal = ref(false)
const showViewModal = ref(false)
const currentStore = ref(null)
const createSubmitting = ref(false)
const editSubmitting = ref(false)

// 创建门店表单
const createForm = reactive({
  name: '',
  code: '',
  address: '',
  phone: '',
  businessHours: '',
  status: 1,
  description: ''
})

// 编辑门店表单
const editForm = reactive({
  id: null,
  name: '',
  code: '',
  address: '',
  phone: '',
  businessHours: '',
  status: 1,
  description: ''
})

// 搜索参数
const searchParams = reactive({
  name: '',
  status: '',
  page: 1,
  size: 12
})

// 分页信息
const pagination = reactive({
  current: 1,
  pages: 1,
  total: 0,
  size: 12
})

// 获取门店列表
const fetchStoreList = async () => {
  loading.value = true
  try {
    const response = await getStoreList(searchParams)
    if (response.code === 200) {
      storeList.value = response.data.records || []
      pagination.current = response.data.current || 1
      pagination.pages = response.data.pages || 1
      pagination.total = response.data.total || 0
      pagination.size = response.data.size || 12
    }
  } catch (error) {
    console.error('获取门店列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取统计信息
const fetchStatistics = async () => {
  try {
    const response = await getStoreStatistics()
    if (response.code === 200) {
      statistics.value = response.data
    }
  } catch (error) {
    console.error('获取统计信息失败:', error)
  }
}

// 搜索处理
const handleSearch = () => {
  searchParams.page = 1
  pagination.current = 1
  fetchStoreList()
}

// 分页处理
const changePage = (page) => {
  searchParams.page = page
  fetchStoreList()
}

// 获取状态样式类
const getStatusClass = (status) => {
  switch (status) {
    case 1: return 'active'
    case 2: return 'paused'
    case 3: return 'closed'
    default: return ''
  }
}

// 获取状态操作样式类
const getStatusActionClass = (status) => {
  switch (status) {
    case 1: return 'pause'
    case 2: return 'resume'
    case 3: return 'resume'
    default: return ''
  }
}

// 获取状态操作文本
const getStatusActionText = (status) => {
  switch (status) {
    case 1: return '暂停'
    case 2: return '恢复'
    case 3: return '恢复'
    default: return '设置'
  }
}

// 编辑门店
const editStore = (store) => {
  currentStore.value = { ...store }
  // 填充编辑表单
  Object.assign(editForm, {
    id: store.id,
    name: store.name,
    code: store.code,
    address: store.address,
    phone: store.phone || '',
    businessHours: store.businessHours || '',
    status: store.status,
    description: store.description || ''
  })
  showEditModal.value = true
}

// 查看门店
const viewStore = (store) => {
  currentStore.value = store
  showViewModal.value = true
}

// 切换门店状态
const toggleStoreStatus = async (store) => {
  const newStatus = store.status === 1 ? 2 : 1
  const statusText = newStatus === 1 ? '恢复营业' : '暂停营业'
  
  if (!confirm(`确定要${statusText}吗？`)) {
    return
  }

      try {
      const response = await updateStoreStatus(store.id, newStatus)
      if (response.code === 200) {
        message.success(`${statusText}成功`)
        await fetchStoreList()
        await fetchStatistics()
      } else {
        message.error(response.message || `${statusText}失败`)
      }
    } catch (error) {
      console.error('更新门店状态失败:', error)
      message.error(`${statusText}失败`)
    }
}

// 删除门店
const deleteStoreItem = async (store) => {
  if (!confirm(`确定要删除门店"${store.name}"吗？此操作不可恢复。`)) {
    return
  }

  try {
    const response = await deleteStore(store.id)
    if (response.code === 200) {
      message.success('删除成功')
      await fetchStoreList()
      await fetchStatistics()
    } else {
      message.error(response.message || '删除失败')
    }
  } catch (error) {
    console.error('删除门店失败:', error)
    message.error('删除失败')
  }
}

// 处理创建门店
const handleCreateStore = async () => {
  createSubmitting.value = true
  
  try {
    // 验证门店编码格式
    if (!/^[A-Z0-9]{3,20}$/.test(createForm.code)) {
      message.warning('门店编码格式不正确，应为3-20位大写字母和数字')
      return
    }

    // 检查门店编码是否存在
    const checkResponse = await checkCodeExists(createForm.code)
    if (checkResponse.code === 200 && checkResponse.data === true) {
      message.warning('门店编码已存在，请使用其他编码')
      return
    }

    const response = await createStore(createForm)
    if (response.code === 200) {
      message.success('门店创建成功')
      showCreateModal.value = false
      // 重置表单
      Object.assign(createForm, {
        name: '',
        code: '',
        address: '',
        phone: '',
        businessHours: '',
        status: 1,
        description: ''
      })
      await fetchStoreList()
      await fetchStatistics()
    } else {
      message.error(response.message || '创建失败')
    }
  } catch (error) {
    console.error('创建门店失败:', error)
    // 处理验证错误或其他错误
    if (error.response?.data?.message) {
      message.error(error.response.data.message)
    } else if (error.response?.status === 400) {
      message.error('请求参数错误')
    } else {
      message.error('创建失败')
    }
  } finally {
    createSubmitting.value = false
  }
}

// 处理编辑门店
const handleEditStore = async () => {
  editSubmitting.value = true
  
  try {
    const response = await updateStore(editForm)
    if (response.code === 200) {
      message.success('门店更新成功')
      showEditModal.value = false
      await fetchStoreList()
      await fetchStatistics()
    } else {
      message.error(response.message || '更新失败')
    }
  } catch (error) {
    console.error('更新门店失败:', error)
    // 处理验证错误或其他错误
    if (error.response?.data?.message) {
      message.error(error.response.data.message)
    } else if (error.response?.status === 400) {
      message.error('请求参数错误')
    } else {
      message.error('更新失败')
    }
  } finally {
    editSubmitting.value = false
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 页面初始化
onMounted(() => {
  fetchStoreList()
  fetchStatistics()
})
</script>

<style scoped>
.stores-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.page-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
  color: #2d3748;
}

.statistics {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 80px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #5856d6;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.8rem;
  color: #718096;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #5856d6, #228B22);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(88, 86, 214, 0.4);
}

.add-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 25px;
}

.store-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.store-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.store-name {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  color: #2d3748;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-badge.active {
  background: rgba(34, 139, 34, 0.1);
  color: #16a34a;
}

.store-info {
  margin-bottom: 25px;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
}

.info-label {
  color: #718096;
  min-width: 80px;
  font-size: 0.9rem;
}

.info-value {
  color: #2d3748;
  font-weight: 500;
  font-size: 0.9rem;
}

.store-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  flex: 1;
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: white;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.action-btn:hover {
  background: #f7fafc;
  border-color: #5856d6;
  color: #5856d6;
}

.action-btn.edit:hover {
  background: rgba(88, 86, 214, 0.1);
}

.action-btn.view:hover {
  background: rgba(34, 139, 34, 0.1);
  border-color: #228B22;
  color: #228B22;
}

.action-btn.settings:hover {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
  color: #f59e0b;
}

/* 新增样式 */
.filters {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  align-items: center;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: #9ca3af;
}

.search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: #5856d6;
  box-shadow: 0 0 0 3px rgba(88, 86, 214, 0.1);
}

.status-filter {
  padding: 10px 15px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.status-filter:focus {
  outline: none;
  border-color: #5856d6;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #718096;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #5856d6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #718096;
  text-align: center;
}

.empty-icon {
  width: 80px;
  height: 80px;
  fill: #e2e8f0;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 1.2rem;
  margin: 0 0 10px 0;
  color: #4a5568;
}

.empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  padding: 20px;
}

.page-btn {
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: white;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  background: #5856d6;
  color: white;
  border-color: #5856d6;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  color: #718096;
  font-size: 0.9rem;
}

.status-badge.paused {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.status-badge.closed {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.action-btn.status.pause {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border-color: #f59e0b;
}

.action-btn.status.resume {
  background: rgba(34, 139, 34, 0.1);
  color: #228B22;
  border-color: #228B22;
}

.action-btn.delete {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: #ef4444;
}

.action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #2d3748;
}

.close-btn {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.close-btn:hover {
  background: #f7fafc;
}

.close-btn svg {
  width: 20px;
  height: 20px;
  fill: #718096;
}

.store-form {
  padding: 25px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #4a5568;
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #5856d6;
  box-shadow: 0 0 0 3px rgba(88, 86, 214, 0.1);
}

.form-group input:disabled {
  background: #f7fafc;
  color: #718096;
  cursor: not-allowed;
}

.form-group small {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #718096;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.cancel-btn,
.submit-btn {
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid;
}

.cancel-btn {
  background: white;
  color: #718096;
  border-color: #e2e8f0;
}

.cancel-btn:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
}

.submit-btn {
  background: linear-gradient(135deg, #5856d6, #228B22);
  color: white;
  border-color: transparent;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(88, 86, 214, 0.4);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.store-details {
  padding: 25px;
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f7fafc;
}

.detail-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.detail-row label {
  min-width: 100px;
  font-weight: 500;
  color: #718096;
  font-size: 0.9rem;
}

.detail-row span {
  color: #2d3748;
  font-size: 0.9rem;
}
</style> 